<template>
	<view>
	
		<view class="login_box">
		
			<view class="text_login">
				<view class="t">
					<image src="../../static/image/logo1.png" mode=""></image>
				</view>
			
				<!-- logo -->
				<!-- <image class="login_logo" src="../../static/logo/orange.png" alt="" /> -->

				<!-- 表单区域 -->
				<view class="login_phone">
					<text>手机号</text>
					<input v-model="phone" type="text" maxlength="11" @blur="checkphone" />
				</view>
				<view class="login_code">
					<text>验证码</text>
					<input v-model="code" type="text" maxlength="4" @blur="checkcode" />
					<view @click="getCode" hover-class="touchOpacity">{{msg}}</view>
				</view>

				<!-- 登录按钮 -->
				<view class="login_but" hover-class="touchOpacity">
					<text space="ensp" @click="login">登 录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入封装好的接口
import {SendSMS,smsLogin} from '@/request/app.js'
	export default {
		data() {
			return {
				phone: '', //手机号
				code: '', //验证码
				sendCode: '', //获取的验证码
				msg: "获取验证码",
				num: 15,
				isshow: true //判断按钮状态
			}
		},
		methods: {
			// 失去焦点判断手机号
			checkphone(){
				let reg=/^1\d{10}$/
				if(!reg.test(this.phone)){
					uni.showToast({
						title:'请输入正确的手机格式',
						icon:"none",
						duration:3000
					})
					return false
				}else{
					return true
				}
				
			},
			// 失去焦点判断验证码
			checkcode(){
				if(!this.code||this.code!=this.sendCode){
					uni.showToast({
						title:'请先获取验证码',
						icon:'none'
					})
					return
				}
			},
			// 获取验证码
			 getCode(){
				if(!this.isshow) return
				let a= this.checkphone()
				console.log(a);
				// a是检测手机号返回的结果
				if(a){
					// 判断储存
					if(uni.getStorageSync('code')){
						this.sendCode=uni.getStorageSync('code')
							this.isshow = false
						let timer=setInterval(()=>{
							this.num--
							this.msg=`${this.num}s后，可以重新获取`
							if(this.num<1){
								clearInterval(timer)
								this.msg='收获验证码'
								this.isshow = true
								this.num=15
							}
						},1000)
					}else{
						SendSMS({phone:this.phone}).then(res=>{
							if(res.data.code==200){
								// 验证码储存到本地
								this.sendCode=res.data.list.code
								uni.setStorageSync('code',res.data.list.code)
											this.isshow = false
										let timer = setInterval(() => {
									    this.num--
										this.msg = `${this.num}s后，可以重新获取`
										if (this.num < 1) {
										clearInterval(timer)
										this.msg = '收获验证码'
										this.isshow = true
										this.num = 15
																		}
								}, 1000)
							}
						})
					}
				}
			},
			// 登录
			login(){
				if(!this.phone||!this.code){
					uni.showToast({
						title:'请输入手机号与验证码',
						icon:"none"
					})
					return
				}
				if(this.code==this.sendCode){
					smsLogin({
						phone:this.phone
					}).then(res=>{
						if(res.data.code==200){
							uni.setStorageSync('userinfo',res.data.list)
							uni.switchTab({
								url:'../mine/mine'
							})
						}
					})
				}else{
					uni.showToast({
						title:'请输入正确验证码',
						icon:"none"
					})
				}
			}
	}
	}
</script>

<style>
	.login_box {
		height: 100%;
		background-color: #f2f2f2;
		overflow: hidden;
		margin: 160rpx auto;
	}

	.text_login {
		padding-top: 40px;
		background-color: #FFFFFF;
		/* margin: 5px 5px 0; */
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login_logo {
		width: 364rpx;
		height: 96rpx;
		margin: 488rpx 0 88rpx 0;
	}

	.login_phone {
		height: 60rpx;
		width: 610rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		color: #666666;
		font-size: 24rpx;
	}

	input {
		flex: 1;
		margin-left: 15rpx;
	}

	.login_code {
		height: 60rpx;
		width: 610rpx;
		border-bottom: 1rpx solid #CCCCCC;
		display: flex;
		justify-content: space-between;
		color: #666666;
		font-size: 24rpx;
		margin-top: 34rpx;

	}

	.login_code view {
		width: 160rpx;
		line-height: 48rpx;
		height: 48rpx;
		text-align: center;
		background-color: #6495ED;
		font-size: 20rpx;
		color: #FFFFFF;

	}

	.login_but {
		width: 610rpx;
		line-height: 49px;
		background-color: #6495ED;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
	image{
		width: 300rpx;
		height: 100rpx;
	}
	
</style>
